<!doctype html>

<html>

<head>
  <title>Customize style</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <style>
    body {
      text-align: center;
    }

    #g1,
    #g2,
    #g3,
    #g4,
    #g5,
    #g6 {
      width: 200px;
      height: 160px;
      display: inline-block;
      margin: 1em;
    }

    p {
      display: block;
      width: 450px;
      margin: 2em auto;
      text-align: left;
    }
  </style>

</head>

<body>
  <div id="g1"></div>
  <div id="g2"></div>
  <div id="g3"></div>
  <div id="g4"></div>
  <div id="g5"></div>
  <div id="g6"></div>
  <p>
    Not digging default style? Then mock your own, Picasso! JustGage features bunch of styling options including gauge
    width, gauge color and shadow, gauge level colors, colors for title, value, min &amp; max etc.
  </p>
  <p>
    Check non-minified version of justgage.js for list of all setup parameters.
  </p>
  <script src="../raphael.min.js"></script>
  <!--<script src="../justgage-1.0.1.js"></script>-->
  <script src="../justgage.js"></script>
  <script>
    /** Random integer  */
    function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    document.addEventListener("DOMContentLoaded", function (event) {

      var g1, g2, g3, g4, g5, g6;

      var g1 = new JustGage({
        id: "g1",
        value: getRandomInt(0, 100),
        min: 0,
        max: 100,
        title: "Custom Width",
        label: "",
        gaugeWidthScale: 0.2
      });

      var g2 = new JustGage({
        id: "g2",
        value: getRandomInt(0, 100),
        min: 0,
        max: 100,
        title: "Custom Shadow",
        label: "",
        showInnerShadow: true,
        shadowOpacity: 1,
        shadowSize: 5,
        shadowVerticalOffset: 10
      });

      var g3 = new JustGage({
        id: "g3",
        value: getRandomInt(0, 100),
        min: 0,
        max: 100,
        title: "Custom Colors",
        label: "",
        levelColors: [
          "#00fff6",
          "#ff00fc",
          "#1200ff"
        ]
      });

      var g4 = new JustGage({
        id: "g4",
        value: getRandomInt(0, 100),
        min: 0,
        max: 100,
        title: "Hide Labels",
        hideMinMax: true
      });


      var g5 = new JustGage({
        id: "g5",
        value: getRandomInt(0, 100),
        min: 0,
        max: 100,
        title: "Animation Type",
        label: "",
        startAnimationTime: 2000,
        startAnimationType: ">",
        refreshAnimationTime: 1000,
        refreshAnimationType: "bounce"
      });

      var g6 = new JustGage({
        id: "g6",
        value: getRandomInt(0, 100),
        min: 0,
        max: 100,
        title: "Minimal",
        label: "",
        hideMinMax: true,
        gaugeColor: "#fff",
        levelColors: ["#000"],
        startAnimationTime: 1,
        startAnimationType: "linear",
        refreshAnimationTime: 1,
        refreshAnimationType: "linear"
      });

      setInterval(function () {
        g1.refresh(getRandomInt(0, 100));
        g2.refresh(getRandomInt(0, 100));
        g3.refresh(getRandomInt(0, 100));
        g4.refresh(getRandomInt(0, 100));
        g5.refresh(getRandomInt(0, 100));
        g6.refresh(getRandomInt(0, 100));
      }, 2500);

    });
  </script>
</body>

</html>